<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- v-model 数据的双向绑定 -->
    username: <input type="text" v-model="user.username">
    描述： <textarea name="" id="" v-model="user.desc" cols="30" rows="10"></textarea>
    爱好：
    <input type="checkbox" value="1" v-model="user.interset"> 吃饭
    <input type="checkbox" value="2" v-model="user.interset"> 睡觉
    <input type="checkbox" value="3" v-model="user.interset"> 打豆豆


    性别：
    <input type="radio" v-model="user.gender" value="1"> 男
    <input type="radio" v-model="user.gender" value="2"> 女


    城市：
    <select name="" id="" v-model="user.city">
      <option value="" disabled>==请选择==</option>
      <option value="1">北京</option>
      <option value="2">上海</option>
      <option value="3">南京</option>
    </select>


    城市：
    <select name="" id="" v-model="user.cities" multiple>
      <option value="" disabled>==请选择==</option>
      <option value="1">北京</option>
      <option value="2">上海</option>
      <option value="3">南京</option>
    </select>


    城市：
    <select name="" id="" v-model="user.cities" multiple>
      <option value="" disabled>==请选择==</option>
      <option v-for="c in user.mycities" :value="c.id">{{c.name}}</option>
    </select>

    <input type="checkbox" v-model="user.checkedvalue" true-value="gp18-1" false-value="gp18-2">

    <button @click="submitHandler">提交</button>
  </div>


  <script>

    let cities = [{ name: '北京', id: 1 }, { name: "天津", id: 2 }, { name: "上海", id: 3 }]

    var vm = new Vue({
      el: "#app",
      data: {
        user: {
          checkedvalue: 'gp18-1',
          username: '',
          desc: "",
          interset: ['2', '3'],
          gender: '1',
          city: '',
          cities: [],
          mycities: cities

        }
      },
      methods: {
        submitHandler() {
          console.log(this.user)
        }
      }
    })


  </script>

</body>

</html>